<template>
  <div id="firstpage">
    <div class="grid-content ">
      <div v-if="$route.meta.keepAlive">
        <el-menu class="head1"
                 id="head"
                 background-color="#0C0C54"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :default-active="activeIndex"
                 router
                 mode="horizontal">
          <img style="float:left; width:15%;margin-top: 15px;"
               src="/../static/image/two.jpg" />
          <div class="welcome">
            <el-dropdown>
              <span class="el-dropdown-link">
                欢迎你：{{ username }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-link @click="logout"
                           style="color:#ffffff">退出</el-link>
                </el-dropdown-item>
                <el-dropdown-item @click="logout"
                                  style="color:#ffffff">帮助手册</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <NavMenu :navMenus="menuData"></NavMenu>
        </el-menu>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import NavMenu from '../views/main/NavMenu'
import Cookies from 'js-cookie'
import { getMenuList } from '../../src/api/home.js'

export default {
  name: 'MyHeader',
  components: {
    NavMenu: NavMenu
  },
  data () {
    return {
      activeIndex: 'home',
      menuData: [],
      // 用户信息
      username: ''
    }
  },
  methods: {
    logout: function (event) {
      localStorage.clear()
      location.reload()
    }
  },
  created () {
    // 获取菜单树
    getMenuList('/user/getMenuList').then(res => {
      if (res.code === 200) {
        this.menuData = res.data
        localStorage.menuData = JSON.stringify(this.menuData)
        this.username = localStorage.getItem('username')
        // this.menuData = localStorage.menuData
      }
      if (res.code === 500) {
        this.$message(res.data)
      }
    })
    let start = window.location.href.lastIndexOf('/')
    let path = window.location.href.slice(start + 1)
    this.activeIndex = path
  }
}
</script>

<style>
/* 水平样式 */
.el-menu--horizontal > div > .el-submenu {
  float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal > div > .el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin-left: 0px;
  border-bottom: 2px solid transparent;
  color: #909399;
}

/* 解决下图1 下拉三角图标 */
.el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal > div > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
/**
响应式样式
*/
/* .bg-purple {
  background: #0c0c54;
  color: #909399;
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
} */
/* .grid-content {
  border-radius: 4px;
  min-height: 36px;
} */
/* 菜单向右移动 */
.head1 {
  // padding-left: 300px;
}

/* 背景图片 */
#firstpage {
  /* background: url(../static/image/back.jpg); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.welcome {
  color: #fff;
  float: right;
  margin-right: 50px;
}

/* 下拉列表样式 */

.el-dropdown {
  margin-top: 20px;
  color: #ffffff;
}
.el-dropdown-menu {
  background-color: rgb(12, 12, 84);
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: rgb(12, 12, 84);
  color: #ffffff;
}

.tu {
  float: left;
  width: 30%;
}
</style>
